我們可以透過 Fabricjs 建立自由的畫布讓使用者來操控物件。
今天來看看要如何去變更使用者選取後出現的控制項，以及控制滑鼠拖曳的選擇區塊的樣式。

我們可以透過 Fabricjs 來讓使用者的選擇框變得更特別。

控制項邊框的樣式

以下就是預設的控制項樣式

我們可以透過在修改再 fabric.Object 的原型讓之後新增的物件都繼承這些設定。

setControlsVisibility(optionsopt)

可設定哪些控制點是要顯示或不顯示。

可以讓使用者無法讓形狀變形，只能使用等比例縮放。

fabric.Object.prototype.setControlsVisibility({
    bl: true, // 左下
    br: true, // 右下
    mb: false, // 下中
    ml: false, // 中左
    mr: false, // 中右
    mt: false, // 上中
    tl: true, // 上左
    tr: true, // 上右
    mtr: true // 旋轉控制鍵
})

結果

但這樣的作法會讓所有繼承這個原型的物件都被更改屬性，我們也可以透過取得物件實例的方法來對單一物件做更改。

// 只對 rect 的控制項做修改
rect.setControls({
  ...
})

直接隱藏所有的控制點和邊框

若不想看的所有的邊框，可透過 hasBorders、hasControls 來直接對所有的邊框和控制點做操作。

rect.hasControls = false

rect.hasBorders = false

控制項樣式調整

透過 object.set 來設定個別控制項樣式。
需注意的是若需要改變控制點的填滿色時，需要把物件的 transparentCorners 屬性設定為 false，不然預設是 true 會無法填入控制點的顏色。

rect.set({
  // 將此屬性設定成 false 才有辦法設定填滿設定點
  transparentCorners: false,
  borderColor: 'red', // 邊框顏色
  cornerColor: 'red', // 控制點填滿色
  cornerSize: 10, // 控制點大小
  cornerStrokeColor: 'blue', // 控制點邊框色
})

控制項形狀調整

透過 cornerStyle 調整控制點的形狀。
borderDashArray 可以做邊框的虛線。
padding 屬性控制物件和控制項的距離。

rect.set({
  ...
  padding: 10,
  borderDashArray: [5, 5],
  cornerStyle: 'circle'
})

透過 object.selectable = false 讓物件無法被選擇

滑鼠拖曳的選擇區塊

關閉拖曳選擇

預設為藍色透明框框來做選擇的拖曳區塊，可以幫助我們群組物件，若今天我們不需要有這個拖曳的功能，透過設定 canvas.selection 這個參數來控制是否要掩飾拖曳區塊。

設定 canvas.selection = false 不會出現拖曳選擇區塊

指定樣式

selectionColor 拖曳區塊背景顏色

canvas.selectionColor = 'rgba(255,0,0,0.3)'

selectionBorderColor 設定拖曳區塊邊框顏色

canvas.selectionBorderColor = 'red'

selectionLineWidth 設定拖曳區塊邊框粗度

`canvas.selectionLineWidth = '5'

selectionDashArray 設定拖曳區塊虛線樣式

canvas.selectionDashArray = [5, 5]

透過以上設定得到的結果

今日小結

• 控制項相關樣式設定
• 滑鼠拖曳區塊相關樣式設定
• codepen